<template>
  <!-- 实名 选择城市页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">所在城市</view>
      <view class="right_"></view>
    </view>
    <view class="list">
      <view class="left">
        <view
          :class="[activeLeft == index ? 'item active' : 'item']"
          v-for="(item, index) in cityList"
          :key="index"
          @click="handleIndex(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </view>
      <view class="right">
        <view
          class="item"
          v-for="(item, index) in rightList"
          :key="index"
          @click="handleIndex1(index)"
        >
          <view class="row">
            <view :class="[activeRight == index ? 'one active1' : 'one']">
              {{ item.name }}
            </view>
            <view class="two" v-if="activeRight == index">
              <icon type="success_no_circle" size="15" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn" @tap="go"> 保存 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      cityList: [],
      rightList: [],
      activeLeft: 0,
      activeRight: 3,
      shi: "",
      qu: "",
    };
  },
  onLoad(option) {
    this.shi = option.shi;
    this.qu = option.qu;
    this.cityData();
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    cityData() {
      const that = this;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/home/getArea",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            that.cityList = res.data.data;
            if (that.shi && that.qu) {
              let shiList = [];
              let quList = [];
              res.data.data.filter((v) => {
                shiList.push(v.name);
              });
              let shiIndex = "";
              shiIndex = shiList.indexOf(that.shi);
              that.activeLeft = shiIndex;

              res.data.data[shiIndex].list.filter((v) => {
                quList.push(v.name);
              });
              let quIndex = "";
              quIndex = quList.indexOf(that.qu);
              that.activeRight = quIndex;
              that.rightList = res.data.data[shiIndex].list;
            } else {
              that.rightList = res.data.data[that.activeLeft].list;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleIndex(index) {
      //左侧tab栏
      this.activeLeft = index;
      this.rightList = this.cityList[index].list;
    },
    handleIndex1(index) {
      //右侧tab栏
      this.activeRight = index;
    },
    go() {
      uni.setStorageSync("city", {
        name1: this.cityList[this.activeLeft].name,
        name2: this.cityList[this.activeLeft].list[this.activeRight].name,
        shengId: this.cityList[this.activeLeft].areaCode,
        shiId: this.cityList[this.activeLeft].list[this.activeRight].areaCode,
      });
      uni.showToast({
        title: "保存成功",
        duration: 2000,
        icon: "none",
      });
      setTimeout(function () {
        window.history.go(-1);
      }, 1500);
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}
.main {
  padding-top: 92rpx;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}

.list {
  width: 100%;
  border-top: 2rpx solid #eee;
  position: fixed;
  top: 86rpx;
  bottom: 60px;
  display: flex;
  justify-content: space-between;

  .left {
    border-top: 2rpx solid #eee;
    height: 100%;
    width: 270rpx;
    overflow: auto;
    flex-shrink: 0;
    background-color: #fff;

    .item {
      font-size: 26rpx;
      line-height: 37rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(70, 70, 70, 1);
      width: 100%;
      padding: 32rpx 0;

      text {
        display: inline-block;
        width: 179rpx;
        margin-left: 32rpx;
      }
    }

    .active {
      position: relative;
      color: #2168eb;
    }

    .active::before {
      content: "";
      display: block;
      height: 36rpx;
      width: 6rpx;
      background: #2168eb;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-9px);
    }
  }

  > .right {
    border-top: 2rpx solid #eee;
    width: 480rpx;
    overflow: auto;
    background-color: #f8f8fa;

    .row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 42rpx;
      box-sizing: border-box;
      align-items: center;

      .one {
        background-color: rgba(248, 248, 250, 1);
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(70, 70, 70, 1);
      }

      .active1 {
        color: #2168eb;
      }

      .two {
        width: 30rpx;
        height: 30rpx;
        position: relative;
        top: -20rpx;
      }
    }
  }
}

.btn {
  width: 600rpx;
  height: 74rpx;
  background: #2168eb;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  z-index: 666;
  transform: translateX(-50%);
}
</style>
